<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>register</title>
        <script type="text/javascript" src="<?php echo base_url(); ?>static/js/jquery.min.js"></script>
        <style type="text/css">
            input.error{
                border:1px #f00 solid;
            }
            .tips{
                color: #6d6d6d;
            }
            .hide{
                display: none;
            }
            .error-tips{
                color: #E13300;
            }
        </style>
    </head>
    <body>
        <?php echo validation_errors(); ?>
        <form id="register-form" action="<?php echo site_url('auth/register_user'); ?>" method="post">
            <div>
                username : <input type="text" name="username" id="username" value="<?php echo set_value('username');?>">
                <p class="tips">4-20个字符，一个汉字为两个字符，推荐使用中文会会员名字。一旦注册成功会员名将不能修改。</p>
                <p class="hide error-tips">请输入正确的用户名</p>
            </div>
            <div>
                password : <input type="password" name="passwd" id="passwd" value="<?php echo set_value('passwd');?>">
                <p class="hide error-tips">请输入正确的密码</p>
            </div>
            <div>
                hobby : <label><input type="checkbox" name="hobby[]" value="run" <?php echo set_checkbox('hobby', 'run'); ?> />run</label>
                <label><input type="checkbox" name="hobby[]" value="jump" <?php echo set_checkbox('hobby', 'jump'); ?> />jump</label>
                <label><input type="checkbox" name="hobby[]" value="music" <?php echo set_checkbox('hobby', 'music'); ?> />music</label>
                <p class="hide error-tips">必须选择一项</p>
            </div>
            <p><input type="submit" value="register"></p>
        </form>
        <a href="<?php echo site_url('auth');?>">login</a>
        <script type="text/javascript">
            function show_error(ele) {
                ele.addClass('error').siblings('.error-tips').removeClass('hide')
            }
            $('#username').blur(function() {
                var _this = $(this),
                    username = _this.val();
//                if (!/^[a-z]\w{5,19}$/i.test(username)) {
//                    show_error(_this);
//                    return false;
//                } else {
//                    _this.removeClass('error');
//                    _this.siblings('.error-tips').addClass('hide');
//                }
                $.post('<?php echo site_url('auth/valid_username'); ?>', {'username': username}, function(data) {
                    if (!data.success) {
                        _this.siblings('.error-tips').html(data.errmsg);
                        show_error(_this);
                    }else{
                        _this.removeClass('error');
                        _this.siblings('.error-tips').addClass('hide');
                    }
                }, 'json');
            });
            $('#passwd').blur(function() {
                var _this = $(this),
                    passwd = _this.val();
                if (!/^.{6,20}$/i.test(passwd)) {
                    show_error(_this);
                    return false;
                } else {
                    _this.removeClass('error');
                    _this.siblings('.error-tips').addClass('hide');
                }
            });
            function valid_hobby(){
                var tips_error = $('input[name="hobby[]"]').parent();
                if(!$('input[name="hobby[]"]:checked').length){
                    show_error(tips_error);
                }else{
                    tips_error.removeClass('error').siblings('.error-tips').addClass('hide');
                }
            }
            $('#register-form').submit(function(){
                $('#register-form input').trigger('blur');
                valid_hobby();
                if($('#register-form .error').length){
                    return false;
                }
                return true;
            });
        </script>
    </body>
</html>